import './TeacherInfo.scss';
import { fetchInfo } from '@/store/modules/teacher';
import { changeInfoAPI } from '@/apis/teacher';
import { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { removeLocalUserStatus } from '@/utils'
import { Button, Modal, ConfigProvider, Input, message, Empty } from 'antd';

export default function TeacherInfo() {
    const { user_status } = useSelector(state => state.user);
    const { info } = useSelector(state => state.teacher);
    const dispatch = useDispatch();
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [loading, setLoading] = useState(false);
    const [newName, setNewName] = useState('');
    const [newSchool, setNewSchool] = useState('');
    const [newDiploma, setNewDiploma] = useState('');
    const [newPsw, setNewPsw] = useState('');
    const [isPswModalOpen, setIsPswModalOpen] = useState(false);


    const showModal = () => {
        setNewName(info.teacher_name);
        setNewSchool(info.user_school);
        setNewDiploma(info.diploma);
        setIsModalOpen(true);
    };

    const showPswModal = () => {
        setNewPsw(info.userpassword);
        setIsPswModalOpen(true);
    }


    const handleChangeInfo = async () => {
        setLoading(true);
        const res = await changeInfoAPI({
            "teacher_name": newName,
            "user_school": newSchool,
            "telephone": info.telephone,
            "userpassword": info.userpassword,
        }, user_status.token);
        console.log(res);
        setLoading(false);
        setIsModalOpen(false);
        window.location.reload();

    };

    const handleChangePsw = async () => {
        setLoading(true);
        const res = await changeInfoAPI({
            "teacher_name": info.teacher_name,
            "user_school": info.user_school,
            "diploma": info.diploma,
            "telephone": info.telephone,
            "userpassword": newPsw,
        }, user_status.token);
        console.log(res);
        setLoading(false);
        setIsPswModalOpen(false);
        window.location.reload();

    }

    const handleCancelChangePsw = () => {
        setIsPswModalOpen(false);
    }

    const handleCancelChangeInfo = () => {
        setIsModalOpen(false);
    };



    function exit() {
        removeLocalUserStatus();
        window.location.reload();
    }


    useEffect(() => {
        async function getInfo() {
            dispatch(fetchInfo(user_status.token));
        }

        getInfo();
    }, [])

    return (
        <div className="TeacherInfo">
            {Object.keys(info).length === 0 || (
                <>
                    <div className='userInfo'>
                        <header>
                            <h2>个人信息</h2>
                            <button
                                onClick={showModal}
                            >编辑</button>
                        </header>
                        <ul>
                            <li>
                                <span className='label'>姓名</span>
                                <span>{info.teacher_name}</span>
                            </li>
                            <li>
                                <span className='label'>身份</span>
                                <span>教师</span>
                            </li>
                            <li>
                                <span className='label'>学校</span>
                                <span>{info.user_school}</span>
                            </li>
                            <li>
                                <span className='label'>学历</span>
                                <span>{info.diploma}</span>
                            </li>
                        </ul>
                    </div>
                    <div className='accountInfo'>
                        <h2>账号信息</h2>
                        <ul>
                            <li>
                                <span className='label'>账号ID</span>
                                <span>{info.user_id}</span>
                            </li>
                            <li>
                                <span className='label'>电话号码</span>
                                <span>{info.telephone}</span>
                            </li>
                            <li>
                                <span className='label'>密码</span>
                                <span>{info.userpassword}</span>
                                <button
                                    onClick={showPswModal}
                                >修改</button>
                            </li>
                            <li>
                                <span className='label'>注销账户</span>
                            </li>
                        </ul>
                    </div>
                    <ConfigProvider
                        theme={{
                            token: {
                                // Seed Token，影响范围大
                                colorPrimary: '#2486b9',
                                borderRadius: 5,

                                // 派生变量，影响范围小
                                // colorBgContainer: '#f6ffed',
                            },
                        }}
                    >
                        <Modal
                            title={<h3>修改个人信息</h3>}
                            open={isModalOpen}
                            onCancel={handleCancelChangeInfo}
                            footer={[
                                <Button key="back" onClick={handleCancelChangeInfo}>
                                    取消
                                </Button>,
                                <Button key="submit" type="primary" loading={loading} onClick={handleChangeInfo}>
                                    确定
                                </Button>
                            ]}
                            centered
                            width={480}
                        >
                            <label htmlFor='newname'>请输入您的名称</label>
                            <Input id='newname' onInput={function (e) { setNewName(e.target.value) }} value={newName} />
                            <br />
                            <br />
                            <label htmlFor='newschool'>请输入您的学校</label>
                            <Input id='newschool' onInput={function (e) { setNewSchool(e.target.value) }} value={newSchool} />
                        </Modal>
                        <Modal
                            title={<h3>修改密码</h3>}
                            open={isPswModalOpen}
                            onCancel={handleCancelChangePsw}
                            footer={[
                                <Button key="back" onClick={handleCancelChangePsw}>
                                    取消
                                </Button>,
                                <Button key="submit" type="primary" loading={loading} onClick={handleChangePsw}>
                                    确定
                                </Button>
                            ]}
                            centered
                            width={480}
                        >
                            <label htmlFor='newname'>请输您的新密码</label>
                            <Input id='newname' onInput={function (e) { setNewPsw(e.target.value) }} value={newPsw} />
                        </Modal>
                    </ConfigProvider>
                </>
            )}
            <button className='exit' onClick={exit}>退出登录</button>
        </div>
    )
}